<!-- 装修基础组件：列表导航 -->
<template>
  <view class="menu-list-wrap">
    <uni-list :border="true">
      <uni-list-item
        v-for="(item, index) in data.list"
        :key="index"
        show-arrow
        clickable
        @tap="sheep.$router.go(item.url)"
      >
        <template #header>
          <view class="ss-flex ss-col-center">
            <image v-if="item.iconUrl" class="list-icon" :src="sheep.$url.cdn(item.iconUrl)" mode="aspectFit"></image>
            <view
              class="title-text ss-flex ss-row-center ss-col-center ss-m-l-20"
              :style="[{ color: item.titleColor }]"
            >
              {{ item.title }}
            </view>
          </view>
        </template>
        <template #footer>
          <view class="notice-text ss-flex ss-row-center ss-col-center" :style="[{ color: item.subtitleColor }]">
            {{ item.subtitle }}
          </view>
        </template>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script setup>
/**
 * cell
 */
import sheep from '@/sheep'
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})
</script>

<style lang="scss">
.list-icon {
  width: 20px;
  height: 20px;
}
.notice-text {
}
.menu-list-wrap {
  ::v-deep .uni-list {
    background-color: transparent;
  }
}
</style>
